Web page example
This is an example web page to show what is required to communicate with the Read‑a‑Card web server. You must enable the Read‑a‑Card web server from within the Read‑a‑Card software in order for this to work. This example code is available as a file called Card.htm installed with the Read-a-Card application, usually in C:/Program Files (x86)/Read-a-Card.
The Javascript code contained in this example page first opens an asynchronous connection with the web server. It then polls the Read‑a‑Card web server located at the predefined URL and port (once a second) with a GET message. If there is no change in status, the response will be NO CARD otherwise the response message will be in the format: OK,<cardID>,<reader_serial>,<card_type>,<time_stamp>
This message can then be split to extract the required data elements.
In this example page, when a card is detected the card ID is inserted into the appropriate field in an HTML form, and the continue button is enabled.
<HEAD>
<script language=Javascript>
var http = CreateHTTP();
var url = "http://localhost:21059/pollcard";
function CreateHTTP()
{
var obj;
if (window.XDomainRequest) {
// IE8
obj = new window.XDomainRequest();
}
else {
// Everything else
obj = new XMLHttpRequest();
}
return obj;
}
function Poll()
{
/*Avoid browser caching problems by putting a random number on
each request*/
var randURL = url + "/" + Math.random();
if (http) {
if (window.XDomainRequest) {
// IE8
http.onload = EnterResult;
http.open("GET", randURL, true);
}
else {
http.open('GET', randURL, true);
http.onreadystatechange = StateChangeHandler;
}
}
http.send();
setTimeout("Poll()", 1000);
}
function StateChangeHandler(evtXHR)
{
if (http.readyState == 4) {
if (http.status == 200) {
EnterResult();
}
}
}
function EnterResult()
{
/*document.getElementByID ("debug").innerHTML +=
"<BR>" + http.responseText;*/
var values = http.responseText.split(",");
if (values && values[0] == "OK") {
// values[1] is the card ID
if (values[1]) {
/* Enter the value into the field, change the
text and enable the OK button*/
document.userform.cardID.value = values[1];
Hide("promptforcard");
Show("promptcardok");
document.userform.okbutton.disabled = false;
}
}
}
function Hide(object) {
// sub-function used to hide objects
document.getElementById(object).style.display='none';
}
function Show(object) {
// sub-function used to display objects
document.getElementById(object).style.display='inline';
}
</script>
</HEAD>
<BODY onload="Poll();">
<H2>Enter user details</H2>
<FORM name=userform>
<TABLE>
<TR>
<TD>First name:</TD>
<TD><INPUT type=TEXT name=firstName value=></TD>
</TR>
<TR>
<TD>Last name:</TD>
<TD><INPUT type=TEXT name=lastName value=></TD>
</TR>
<TR>
<TD>Card ID:</TD>
<TD><INPUT type=TEXT name=cardID value=></TD>
</TR>
</TABLE>
<DIV id=promptforcard style="display:inline;">
<p>Present card to continue
</DIV>
<DIV id=promptcardok style="display:none;">
<p><font color=339933>Card details received</font>
</DIV>
<BR><BR>
<INPUT type=SUBMIT name=okbutton value=Continue disabled=true>
</FORM>
<DIV id=debug>
</DIV></BODY>
Droid SansDroid Sans BoldOpen SansOpen Sans BoldDroid Sans woffDroid Sans Bold woffOpen Sans woffOpen Sans Bold woff